<template>
  <view class="luck-draw">
    <u-popup v-model="show" mode="center" height="320px" border-radius="22">
      <image class="prize-img" :src="showImg" mode="widthFix"></image>
      <image
        class="close"
        :src="'https://mini.jiaw.com/img/3310320211206.jpg'"
        @click="show = false"
      ></image>
    </u-popup>

    <view class="title">
      <p>满3000元赢</p>
      <p>55寸电视机/空气净化器等豪礼100%中奖</p>
    </view>

    <div class="box">
      <image
        :src="'https://mini.jiaw.com/img/3211220211206.jpg'"
        mode="aspectFit"
      ></image>
      <LuckyWheel
        ref="luckyWheel"
        :blocks="wheel.blocks"
        :prizes="wheel.prizes"
        :buttons="wheel.buttons"
        :defaultConfig="wheel.defaultConfig"
        @start="wheelStart"
        @end="wheelEnd"
      />
    </div>

    <button @click="wheelStart" :disabled="disabled">开始抽奖</button>
    <div class="tips">您有{{ drawCount }}次抽奖机会，满3000可再得一次</div>

    <p class="prize-title">买的越多机会越多</p>
    <div class="prize" v-if="prizeList.length > 0">
      <div class="prize-tips">获奖明细</div>
      <ul>
        <li v-for="item of prizeList">
          {{ item.recieveTime }} 恭喜您获得
          <span>{{ item.goodsName }}</span>
        </li>
      </ul>
    </div>
    <div class="info">
      <div class="info-title">怎么获得更多抽奖机会</div>
      <div class="info-item">
        活动期间，顾客至家饰佳宜山店参加活动的商户消费，单笔实付金额消费满3000元的有效收银凭证，活动期间至家饰佳一楼中厅活动处参与线上抽奖活动，满3000元一次，6000元2次，以此类推，同一顾客、同一品牌、同一送货地址、同一张订单5次机会封顶。每日共200次抽奖机会，抽完即止。收银凭证当周有效，隔周兑换抽奖无效。
        抽奖礼品：55寸电视机、空气净化器、300元OK卡、200元现金、100元现金、50元现金、20元现金、Costa咖啡一杯；
        <br />
        ①活动期间开单顾客方可参与此活动；
        <br />
        ②若发生退款情况，顾客需退还全部中奖金额或礼品；
        <br />
        ③所有消费凭证本活动档期内有效；
        <br />
        ④未正常营业的商户不参加此活动；
        <br />
        ⑤城市家具商品不参加此活动。
      </div>
    </div>
  </view>
</template>

<script>
import LuckyWheel from '../uni-luck-draw/lucky-wheel.vue'
import { queryPersonPrize, luckDraw, getUserInfo } from '@/api'
import { mapState } from 'vuex'
export default {
  components: {
    LuckyWheel
  },
  data() {
    return {
      wheel: {
        blocks: [
          {
            // padding: '10px',
            background: '#d64737'
          }
        ],
        prizes: [
          {
            background: '#EC5415',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '空气\n净化器',
                top: '25px'
              }
            ]
          },
          {
            background: '#F39702',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '55寸\n电视机',
                top: '25px'
              }
            ]
          },
          {
            background: '#EC5415',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: 'Costa\n咖啡一杯',
                top: '25px'
              }
            ]
          },
          {
            background: '#F39702',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '300元\nOK卡',
                top: '25px'
              }
            ]
          },
          {
            background: '#EC5415',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '200元\n现金',
                top: '25px'
              }
            ]
          },
          {
            background: '#F39702',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '100元\n现金',
                top: '25px'
              }
            ]
          },

          {
            background: '#EC5415',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '50元\n现金',
                top: '25px'
              }
            ]
          },
          {
            background: '#F39702',
            fonts: [
              {
                wordWrap: false,
                fontColor: '#fff',
                text: '20元\n现金',
                top: '25px'
              }
            ]
          }
        ],
        buttons: [
          { radius: '35px', background: '#d64737' },
          { radius: '30px', background: '#FEF102', pointer: true },
          {
            radius: '25px',
            background: '#BD0C1F',
            imgs: [
              {
                src: '../../static/images/pointer.png',
                width: '150%',
                top: '-55%'
              }
            ]
          }
        ],
        defaultConfig: {
          gutter: '5px',
          offsetDegree: 30
        }
      },
      show: false,
      num: '',
      showImg: '',
      prizeList: [],
      page: 1,
      size: 100,
      drawCount: 0,
      disabled: false
    }
  },
  created() {
    this.getPrizeList()
    this.getDrawCount()
  },
  methods: {
    getDrawCount() {
      getUserInfo(this.openId).then(res => {
        this.drawCount = res.data.drawCount
      })
    },
    getPrizeList() {
      queryPersonPrize(this.userInfo.id, this.page, this.size).then(res => {
        this.prizeList = res.data.list
      })
    },
    find(num) {
      if (num === '空气净化器') {
        this.showImg = 'https://mini.jiaw.com/img/1260920211210.jpg'
        return 0
      }
      if (num === '55寸电视机') {
        this.showImg = 'https://mini.jiaw.com/img/1772920211210.jpg'
        return 1
      }
      if (num === 'Costa咖啡一杯') {
        this.showImg = 'https://mini.jiaw.com/img/3873720211210.jpg'
        return 2
      }
      if (num === '300元OK卡') {
        this.showImg = 'https://mini.jiaw.com/img/5680620211210.jpg'
        return 3
      }
      if (num === '200元现金') {
        this.showImg = 'https://mini.jiaw.com/img/1399720211210.jpg'
        return 4
      }
      if (num === '100元现金') {
        this.showImg = 'https://mini.jiaw.com/img/6980120211210.jpg'
        return 5
      }
      if (num === '50元现金') {
        this.showImg = 'https://mini.jiaw.com/img/6305020211210.jpg'
        return 6
      }
      if (num === '20元现金') {
        this.showImg = 'https://mini.jiaw.com/img/4487620211210.jpg'
        return 7
      }
    },
    wheelStart() {
      this.getDrawCount()
      if (this.drawCount === 0) {
        uni.showToast({
          title: '您没有抽奖机会!',
          duration: 1000,
          icon: 'none'
        })
        return
      }
      luckDraw('f750af4b0ceb4b83b0cc5745a3553fc0', this.userInfo.id).then(
        res => {
          console.log(res)
          if (res === '今日奖品已发放完毕') {
            uni.showToast({
              title: '今日奖品已发放完毕!',
              duration: 1000,
              icon: 'none'
            })
            return
          }
          this.$refs.luckyWheel.play()
          this.disabled = true
          const num = this.find(res.goodsName)
          this.drawCount = res.userDrawCount
          this.getPrizeList()
          setTimeout(() => {
            this.$refs.luckyWheel.stop(num)
          }, 2000)
        }
      )
    },
    wheelEnd() {
      this.show = true
      this.disabled = false
    }
  },
  computed: {
    ...mapState(['userInfo', 'openId'])
  }
}
</script>

<style lang="less" scoped>
.luck-draw {
  background: #501e81;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20rpx 40rpx;

  /deep/ .u-mode-center-box {
    background: #98979977;

    .prize-img {
      width: 500rpx;
      height: 500rpx;
    }
    .close {
      width: 70rpx;
      height: 70rpx;
      display: block;
      margin: 20rpx auto;
    }
  }
  .place {
    width: 200px;
    height: 200px;
  }

  .box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60rpx 0;
    image {
      width: 346px;
      height: 346px;
      position: absolute;
      // z-index: 10;
    }
  }

  .title {
    margin: 20px 0;
    text-align: center;
    p {
      background: #501e81;
      color: #fff;
      font-size: 50rpx;
    }
  }
  button {
    background: #fef102;
    color: #cb280b;
    font-size: 36rpx;
    margin-top: 40rpx;
  }

  .tips {
    color: #fff;
    margin: 40rpx 0;
    border: 1px solid #fff;
    padding: 20rpx;
    border-radius: 20rpx;
  }
  .info {
    color: #fff;
    border-radius: 20rpx;
    border: 1px solid #fff;
    padding: 0 20rpx;
    .info-title {
      text-align: center;
      color: #d10829;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      padding: 10rpx;
      width: 50%;
      margin: 0 auto;
      background: #fff;
    }
    .info-item {
      display: inline-block;
      padding: 10px 0;
    }
  }
  .prize-title {
    color: #712dd6;
    background: #501e81;
    font-size: 44rpx;
    margin-bottom: 30rpx;
  }
  .prize {
    padding: 20rpx 15rpx;
    width: 100%;
    margin: 30rpx 0;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .prize-tips {
      margin: 20rpx;
      font-size: 30rpx;
      font-weight: 700;
      text-align: center;
    }
    ul {
      overflow-y: scroll;
      height: 300rpx;
      padding: 0 18rpx;
      li {
        margin: 20rpx 0;
        span {
          color: #b1091c;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
